<template>
  <el-row style="width: 100%">
    <el-col :span="20"> {{ NodeInfo.name }} </el-col>
    <el-col :span="4">
      {{ NodeInfo.manager }}
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!isRoot"
            command="edit"
          >查看部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!isRoot"
            command="del"
          >删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
import { delDepts } from '@/api/departments'
export default {
  props: {
    // 传递过来的节点数据，包含name和manager属性
    NodeInfo: {
      type: Object,
      required: true
    },
    // 传递是否为顶层的标记，如果为true是顶层
    // 顶层就不显示查看部门和删除部门
    isRoot: {
      type: Boolean
    }
  },

  methods: {
    handleCommand(cmd) {
      switch (cmd) {
        case 'add':
          // 这里做新增
          this.$emit('click-add', this.NodeInfo.id)
          break
        case 'edit':
          // 这里做查看（修改）
          this.$emit('click-edit', this.NodeInfo.id)
          break
        case 'del':
          this.$confirm('确认要删除此部门吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            // 发请求删除
            await delDepts(this.NodeInfo.id)
            // 通知父组件刷新数据
            this.$emit('refresh')

            // 提示删除成功
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })

          break
      }
    }
  }
}
</script>

<style>
</style>
